<template>
  <div class="application-status">
    <div class="filter-bar">
      <div class="block">
        <span class="demonstration">关键字:</span>
        <input type="text" placeholder="请输入搜索关键字" v-model="searchKeyword" />
      </div>

      <div class="block">
        <span class="demonstration">年份：</span>
        <select v-model="year" @change="handleYearChange" class="custom-select">
          <option value="">请选择年份</option>
          <option v-for="yearOption in yearOptions" :key="yearOption" :value="yearOption">{{ yearOption }}</option>
        </select>
      </div>

      <div class="block" v-if="year">
        <span class="demonstration">月份：</span>
        <select v-model="month" @change="handleMonthChange" class="custom-select">
          <option value="">请选择月份</option>
          <option v-for="monthOption in monthOptions" :key="monthOption" :value="monthOption">{{ monthOption }}</option>
        </select>
      </div>

      <div class="block" v-if="year && month">
        <span class="demonstration">日期：</span>
        <select v-model="date" class="custom-select">
          <option value="">请选择日期</option>
          <option v-for="day in daysInMonth" :key="day" :value="day">{{ day }}</option>
        </select>
      </div>

      <div class="block">
        <button @click="applyFilters(searchKeyword, year, month, date)">搜索</button>
      </div>
    </div>

    <div v-if="loading" class="loading-container">
      <el-loading-spinner></el-loading-spinner>
      <p>数据加载中...</p>
    </div>

    <el-alert
      v-if="error"
      :title="error"
      type="error"
      show-icon
      @close="error = null">
    </el-alert>

    <table v-if="!loading && !error">
      <thead>
        <tr>
          <th>序号</th>
          <th>提交时间</th>
          <th>标准名称</th>
          <th>项目名称</th>
          <th>状态</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in paginatedData" :key="item.id">
          <td>{{ (currentPage - 1) * pageSize + index + 1 }}</td>
          <td>{{ item.startDate }}</td>
          <td>{{ item.staName }}</td>
          <td>{{ item.pjName }}</td>
          <td>
            <el-tag :type="item.cpStatus == 0 ? 'warning' : 'success'">
              {{ item.cpStatus == 0 ? '未完成' : '已完成' }}
            </el-tag>
          </td>
        </tr>
      </tbody>
    </table>

    <div class="pagination-container">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-sizes="[10, 15, 20, 30]"
        :page-size="pageSize"
        :total="filteredData.length"
        layout="total, sizes, prev, pager, next, jumper"
        background>
      </el-pagination>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        currentPage: 1,
        pageSize: 10,
        searchKeyword: '',
        year: null,
        month: null,
        date: null,
        yearOptions: Array.from({ length: 50 }, (_, i) => 2024 - i),
        applications: [],
        daysInMonth: [],
        loading: false,
        error: null,
        searchTimeout: null
      };
    },
    computed: {
      filteredData() {
        return this.applications;
      },
      paginatedData() {
        const start = (this.currentPage - 1) * this.pageSize;
        const end = this.currentPage * this.pageSize;
        return this.filteredData.slice(start, end);
      },
      monthOptions() {
        return this.year
          ? Array.from({ length: 12 }, (_, i) => i + 1)
          : [];
      },
    },
    created() {
      this.fetchData();
    },
    methods: {
      async fetchData() {
        this.loading = true;
        try {
          const response = await this.$http.get("/findComparisonByUID");
          this.applications = response.data;
        } catch (err) {
          this.error = '获取数据失败,请稍后重试';
          console.error('Error:', err);
        } finally {
          this.loading = false;
        }
      },
      async applyFilters(keyword, year, month, date) {
        this.loading = true;
        try {
          const response = await this.$http.get("/searchComparison", {
            params: { info: keyword, year, month, day: date }
          });
          this.applications = response.data;
        } catch (err) {
          this.error = '搜索失败,请稍后重试';
          console.error('Error:', err);
        } finally {
          this.loading = false;
        }
      },
      handleSizeChange(val) {
        this.pageSize = val;
        this.currentPage = 1;
      },
      handleCurrentChange(val) {
        this.currentPage = val;
        window.scrollTo({
          top: 0,
          behavior: 'smooth'
        });
      },
      handleYearChange() {
        this.month = null;
        this.date = null;
        this.daysInMonth = Array.from({ length: 31 }, (_, i) => i + 1);
      },
      handleMonthChange() {
        this.date = null;
        const year = this.year || new Date().getFullYear();
        const month = this.month || new Date().getMonth() + 1;
        this.daysInMonth = Array.from({ length: new Date(year, month, 0).getDate() }, (_, i) => i + 1);
      },
    },
    directives: {
      'hover-option': {
        inserted: (el, binding, vnode) => {
          el.addEventListener('mouseenter', () => {
            binding.value = true;
          });
          el.addEventListener('mouseleave', () => {
            binding.value = false;
          });
        }
      }
    }
  };
</script>

<style scoped>
  .application-status {
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
  }

  .filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
    align-items: center;
  }

    .filter-bar input,
    .filter-bar select,
    .filter-bar button {
      padding: 8px 15px;
      border: 1px solid #ccc;
      border-radius: 4px;
      font-size: 14px;
      transition: border-color 0.3s ease, background-color 0.3s ease;
    }

      .filter-bar select:hover,
      .filter-bar input:hover {
        border-color: #007bff;
        background-color: #fff;
      }

    .filter-bar button {
      background-color: #4CAF50;
      color: white;
      border: none;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }

      .filter-bar button:hover {
        background-color: #45a049;
      }

  table {
    width: 100%;
    border-collapse: collapse;
    background-color: #fff;
    margin-bottom: 20px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  }

  th, td {
    padding: 12px 16px;
    text-align: center;
    border: 1px solid #EBEEF5;
  }

  th {
    background-color: #F5F7FA;
    color: #606266;
    font-weight: 500;
    font-size: 14px;
    height: 40px;
    line-height: 40px;
  }

  td {
    color: #606266;
    font-size: 14px;
    height: 50px;
    line-height: 50px;
  }

  tr:hover td {
    background-color: #F5F7FA;
  }

  .block {
    display: flex;
    align-items: center;
  }

  .demonstration {
    margin-right: 10px;
    font-weight: bold;
  }

  .pagination-container {
    padding: 20px;
    text-align: center;
    background: white;
    border-top: 1px solid #EBEEF5;
  }

  .custom-select {
    padding: 8px 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    appearance: none;
    background-color: white;
    background-image: url('data:image/svg+xml;utf8,<svg fill="black" height="18" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');
    background-repeat: no-repeat;
    background-position: right 10px center;
    cursor: pointer;
  }

    .custom-select option:hover {
      background-color: #007bff;
      color: white;
    }

  .loading-container {
    text-align: center;
    padding: 40px 0;
  }

  .loading-container p {
    color: #909399;
    margin-top: 10px;
  }

  :deep(.el-pagination) {
    font-weight: normal;
    color: #606266;
  }

  :deep(.el-pagination.is-background .el-pager li:not(.disabled).active) {
    background-color: #4CAF50;
    color: white;
  }

  :deep(.el-pagination.is-background .el-pager li:not(.disabled):hover) {
    color: #4CAF50;
  }

  :deep(.el-pagination .el-select .el-input) {
    width: 110px;
  }

  :deep(.el-pagination__sizes) {
    margin-right: 15px;
  }

  :deep(.el-pagination__total) {
    margin-right: 15px;
  }

  :deep(.el-pagination .el-select .el-input .el-input__inner) {
    padding-right: 25px;
    border-radius: 3px;
  }

  :deep(.el-tag) {
    border-radius: 4px;
    padding: 0 8px;
  }

  :deep(.el-tag--warning) {
    background-color: #fdf6ec;
    border-color: #faecd8;
    color: #e6a23c;
  }

  :deep(.el-tag--success) {
    background-color: #f0f9eb;
    border-color: #e1f3d8;
    color: #67c23a;
  }
</style>
